import React, {useState} from "react";
import {Link} from "react-router-dom";
import '../Item/style.less'
import defaultImage  from "../../../../assets/images/img_1.png"
import {loadImageAsync} from "../../../../utils/loadImg"


// 搜索组件里面使用Item
const Item=(props)=>{
    const data=props.data
    const [currentImg,setCurrentImg]=useState(defaultImage)

    //接受异步加载到的img
    loadImageAsync(data.img).then(res=>{
        setCurrentImg(res)
        }).catch(error=>{
            console.log(error)
        }
    )

    return(
        <div className="list-item">
            <Link to={`/details/${data.id}`}>
                <img src={currentImg} alt="" />
                <div className="mask">
                    <div className="left">
                        <p>{data.title}</p>
                        <p>{data.houseType}</p>
                    </div>
                    <div className="right">
                        <div className="btn">
                            {data.rentType}
                        </div>
                    </div>
                </div>
            </Link>
        </div>
    )
}

export default Item